<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="'100%'" :height="'260px'" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
import * as echarts from "echarts";
import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  chartValue: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  isShowEcharts.value = true;
  option.value = {
    color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#722ed1", "#fc8452", "#9a60b4", "#ea7ccc"],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          title: "点击保存为图片"
        }
      }
    },
    title: {
      // text: "碳排放类别占比",
      left: "center"
    },
    grid: {
      left: "20px",
      top: "50px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    // legend: {},
    tooltip: {
      trigger: "item"
    },
    legend: {
      show: true,
      bottom: "bottom",
      type: "scroll",
      width: "60%"
    },
    label: {
      formatter: "{b}: {d}%"
    },
    series: [
      {
        data: [
          {
            name: "晶圆",
            value: 5.21
          },
          {
            name: "光刻胶",
            value: 3.95
          },
          {
            name: "清洗剂",
            value: 3.46
          },
          {
            name: "研磨剂",
            value: 2.82
          },
          {
            name: "研磨垫",
            value: 2.24
          },
          {
            name: "其他",
            value: 61.93
          }
        ],
        type: "pie",
        name: "碳排放类别占比",
        emphasis: {
          focus: "series"
        },
        radius: ["50%", "70%"]
        // itemStyle: {
        //   normal: {
        //     color: function (params) {
        //       var colorList = [
        //         new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: "#3B82F6" },
        //           { offset: 1, color: "#00C8FF" }
        //         ]),
        //         new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: "#FFDE77" },
        //           { offset: 1, color: "#FFA463" }
        //         ]),
        //         new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: "#86EDFF " },
        //           { offset: 1, color: "#00BADB" }
        //         ]),
        //         new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: "#E50000" },
        //           { offset: 1, color: "#FF815B" }
        //         ]),
        //         new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: "#39C670" },
        //           { offset: 1, color: "#9AE250" }
        //         ])
        //       ];
        //       return colorList[params.dataIndex];
        //     }
        //   }
        // }
      }
    ]
  };
};
watch(
  () => props.chartValue,
  newOption => {
    console.log(newOption);
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
